<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改有权人签字管理')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: bootstrap-fileinput-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-signature-edit" th:object="${paeaParaAuthorizedSignature}">
            <input id="id" name="id" th:field="*{id}" type="hidden">
            <input id="status" name="status" th:field="*{status}" type="hidden">
            <div class="form-group">
                <label class="col-sm-2 control-label">授权人机构号：</label>
                <div class="col-sm-4">
                    <div class="input-group">
                        <input id="orgCode" name="orgCode" th:field="*{orgCode}" class="form-control" type="text" required>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
                <label class="col-sm-2 control-label">授权人机构名称：</label>
                <div class="col-sm-4">
                    <div class="input-group">
                        <input id="orgName" name="orgName" th:field="*{orgName}" class="form-control" type="text">
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">授权人职位：</label>
                <div class="col-sm-4">
                    <input id="position" name="position" th:field="*{position}" class="form-control" type="text" required>
                </div>
                <label class="col-sm-2 control-label">授权人姓名：</label>
                <div class="col-sm-4">
                    <input id="name" name="name" th:field="*{name}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">影像启用日期：</label>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input id="startDate" name="startDate" th:value="${#dates.format(paeaParaAuthorizedSignature.startDate, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
                <label class="col-sm-2 control-label">影像停用日期：</label>
                <div class="col-sm-4">
                    <div class="input-group date">
                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                        <input id="endDate" name="endDate" th:value="${#dates.format(paeaParaAuthorizedSignature.endDate, 'yyyy-MM-dd')}" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">申请事由：</label>
                <div class="col-sm-10">
                    <textarea rows="2" cols="20" id="remark" name="remark" th:field="*{remark}" class="form-control" type="text" required></textarea>
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-2 control-label">授权人签字图片名：</label>
                <div class="col-sm-10">
                    <input id="signatureName" name="signatureName" th:field="*{signatureName}" class="form-control" type="text" readonly>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">授权人签字图片路径：</label>
                <div class="col-sm-10">
                    <input type="hidden" id="signaturePath"  name="signaturePath" th:field="*{signaturePath}">
                    <input type="file" id="signature" name="signature" multiple data-min-file-count="1">
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: bootstrap-fileinput-js" />
    <th:block th:include="include :: bootstrap-suggest-js" />
    <script th:inline="javascript">
        var prefix = ctx + "paea/signature";
        var signaturePath = [[${_signaturePath}]];
        $("#form-signature-edit").validate({
            focusCleanup: true
        });
        function submitHandler() {
            var formData = new FormData();
            formData.append("id",$("#id").val());
            formData.append("status",$("#status").val());
            formData.append("orgCode",$("#orgCode").val());
            formData.append("orgName",$("#orgName").val());
            formData.append("position",$("#position").val());
            formData.append("name",$("#name").val());
            formData.append("startDate",$("#startDate").val());
            formData.append("endDate",$("#endDate").val());
            formData.append("remark",$("#remark").text());
            formData.append("signatureName",$("#signatureName").val());
            formData.append("signaturePath",$("#signaturePath").val());
            if($('#signature')[0].files.length==0){
                if ($.validate.form()) {
                    $.operate.save(prefix + "/edit", $('#form-signature-edit').serialize());
                }
            }else{
                formData.append("signature", $('#signature')[0].files[0]);
                if ($.validate.form()) {
                    var config = {
                        url: prefix + "/updateSingature",
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        type: 'POST',
                        beforeSend: function () {
                            $.modal.loading("正在处理中，请稍后...");
                            $.modal.disable();
                        },
                        success: function(result) {
                            if (typeof callback == "function") {
                                callback(result);
                                alert(result.msg);
                            }
                            $.operate.successCallback(result);
                        }
                    };
                    $.ajax(config);
                    //$.operate.save(prefix + "/add", formData);
                }
            }
        }
        $("input[name='startDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });

        $("input[name='endDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        $("#signature").fileinput({
            language : 'zh',
            uploadUrl: prefix+'/fileUpload',
            uploadAsync : true, //默认异步上传
            showCaption:true,//预览
            autoReplace:true,//自动替换
            allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
            showUpload:false,
            maxFileCount:1,
            maxFileSize:10240,//单位为kb，上传文件的最大大小值
            elCaptionText:'',
            showPreview : true,
            enctype: 'multipart/form-data',
            showClose: false,
            dropZoneTitle:'',
            placeholder:'',
            /*layoutTemplates: {
                actions:'<div class ="file_actions"><div class="clearfix"></div></div>',
                actionDelete:'', //去除上传预览的缩略图中的删除图标
                actionUpload:'',//去除上传预览缩略图中的上传图片；
                actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
            },*/
            'theme': 'explorer-fas',
            overwriteInitial: true,//覆盖初始化图片
            initialPreviewAsData: true,
            initialPreview: [
                signaturePath
            ]
        });
        //上传前
        $('#signature').on('filepreupload', function(event, data, previewId, index) {
            //console.log("filepreupload");
        });
        //搜索自动补全
        var testBsSuggest = $("#orgCode").bsSuggest({
            url: ctx + "system/dept/deptModel",
            showBtn: false,
            idField: "deptName",
            keyField: "deptId"
        }).on('onSetSelectValue', function (e, keyword) {
            $("#orgName").val(keyword.id);
        });
        //搜索自动补全
        var testBsSuggest = $("#orgName").bsSuggest({
            url: ctx + "system/dept/deptModel",
            showBtn: false,
            idField: "deptId",
            keyField: "deptName"
        }).on('onSetSelectValue', function (e, keyword) {
            $("#orgCode").val(keyword.id);
        });
    </script>
</body>
</html>